<template>
  <view class="home-container">
    <!-- 用户信息展示区 -->
    <view class="user-info-bar" v-if="userInfo.phone">
      <text class="welcome-text">欢迎，{{ userInfo.phone }}</text>
      <text class="status-tag" :class="{ 'status-active': userInfo.status === 1 }">
        {{ userInfo.status === 1 ? '账号正常' : '账号禁用' }}
      </text>
    </view>
    <!-- 用户信息加载占位 -->
    <view class="user-info-bar" v-else>
      <text class="welcome-text">加载中...</text>
    </view>

    <!-- 顶部卡通图 -->
    <view class="top-banner">
      <image src="/static/images/cartoon2.png" mode="widthFix" class="cartoon-img" lazy-load />
    </view>

    <!-- 核心功能区 -->
    <view class="core-functions">
      <view class="function-item" @click="toChatPage">
        <image src="/static/icons/english.png" class="function-icon" mode="widthFix" />
        <text class="function-text">英语陪聊</text>
      </view>
      <view class="function-item" @click="showHomeworkSubmenu">
        <image src="/static/icons/homework_correct.png" class="function-icon" mode="widthFix" />
        <text class="function-text">作业批改</text>
      </view>
      <view class="function-item" @click="showQuestionSubmenu">
        <image src="/static/icons/question_generate.png" class="function-icon" mode="widthFix" />
        <text class="function-text">智能出题</text>
      </view>
    </view>

    <!-- 科目批改小图标 -->
    <view class="subject-icons">
      <view class="subject-item" @click="handleSubject('chinese')">
        <image src="/static/icons/chinese.png" class="subject-icon" mode="widthFix" />
        <text class="subject-text">语文批改</text>
      </view>
      <view class="subject-item" @click="handleSubject('math')">
        <image src="/static/icons/math.png" class="subject-icon" mode="widthFix" />
        <text class="subject-text">数学批改</text>
      </view>
      <view class="subject-item" @click="handleSubject('english')">
        <image src="/static/icons/english.png" class="subject-icon" mode="widthFix" />
        <text class="subject-text">英语批改</text>
      </view>
    </view>

    <!-- 底部Tab栏 -->
    <view class="bottom-tab">
      <view
          class="tab-item"
          :class="{ 'active': currentTab === 'home' }"
          @click="switchTab('home')"
      >
        <image src="/static/icons/home.png" class="tab-icon" mode="widthFix" />
        <text class="tab-text">首页</text>
      </view>
      <view
          class="tab-item"
          :class="{ 'active': currentTab === 'chat' }"
          @click="switchTab('chat')"
      >
        <image src="/static/icons/english_chat.png" class="tab-icon" mode="widthFix" />
        <text class="tab-text">英语陪聊</text>
      </view>
      <view
          class="tab-item"
          :class="{ 'active': currentTab === 'package' }"
          @click="switchTab('package')"
      >
        <image src="/static/icons/buy.png" class="tab-icon" mode="widthFix" />
        <text class="tab-text">购买套餐</text>
      </view>
      <view
          class="tab-item"
          :class="{ 'active': currentTab === 'mine' }"
          @click="switchTab('mine')"
      >
        <image src="/static/icons/user.png" class="tab-icon" mode="widthFix" />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 从 'uni-app' 导入 onShow 生命周期钩子
import { onShow } from '@dcloudio/uni-app';
import request from '@/utils/request.js'; // 引入封装的请求工具

// 当前激活的Tab
const currentTab = ref('home');
// 用于存储用户信息的响应式变量
const userInfo = ref({});


/**
 * 使用从 'uni-app' 导入的 onShow 函数来注册生命周期钩子
 * 这种方式比顶层 function onShow() {} 更可靠，兼容性更好
 */
onShow(() => {
  console.log('首页 onShow 生命周期钩子被调用 (通过导入方式)'); // 调试日志
  currentTab.value = 'home';
  fetchUserInfo(); // 调用获取用户信息的方法
});

/**
 * 获取用户信息的方法
 */
const fetchUserInfo = async () => {
  console.log('开始调用 fetchUserInfo 方法'); // 调试日志
  try {
    // 调用新的用户信息查询接口
    const res = await request.get('agent/user/userDetail');
    console.log('用户信息接口调用成功，返回数据:', res); // 调试日志

    // 【核心修改】判断业务状态码
    if (res.code === 200) {
      // 将返回的用户信息存入响应式变量，用于页面展示
      // 注意：用户信息在 res.data 中
      userInfo.value = res.data;
    } else {
      // 业务错误，例如用户不存在等
      uni.showToast({ title: res.msg || '获取用户信息失败', icon: 'none' });
      console.error('获取用户信息业务失败:', res.msg);
    }

  } catch (error) {
    // 网络或系统级错误，例如401未登录、断网等
    console.error('fetchUserInfo 方法执行异常 (网络或系统错误):', error); // 调试日志
    // request.js 中的 catch 已经处理了401跳转，这里可以不做额外处理
    // 如果需要更通用的网络提示，可以在这里添加
    // uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
  }
};

// ... 其他方法 (switchTab, toChatPage 等) 保持不变 ...
/**
 * Tab切换逻辑
 */
const switchTab = (tab) => {
  currentTab.value = tab;
  if (tab === 'chat') {
    toChatPage();
  } else if (tab === 'mine') {
    toUserCenter();
  } else if (tab === 'package') {
    toPackageList();
  }
};

/**
 * 跳转到英语陪聊页
 */
const toChatPage = () => {
  uni.navigateTo({ url: '/pages/chat/index' });
};

/**
 * 跳转到个人中心
 */
const toUserCenter = () => {
  uni.navigateTo({ url: '/pages/user/index' });
};

/**
 * 跳转到套餐详情
 */
const toPackageList = () => {
  uni.navigateTo({ url: '/pages/package/index' });
};

/**
 * 作业批改子菜单（弹窗选科目）
 */
const showHomeworkSubmenu = () => {
  uni.showActionSheet({
    itemList: ['语文批改', '数学批改', '英语批改'],
    success: (res) => handleSubject(['chinese', 'math', 'english'][res.tapIndex]),
  });
};

/**
 * 智能出题子菜单（弹窗选科目）
 */
const showQuestionSubmenu = () => {
  uni.showActionSheet({
    itemList: ['语文出题', '数学出题', '英语出题'],
    success: (res) =>
        uni.showToast({ title: `即将打开${['chinese', 'math', 'english'][res.tapIndex]}出题`, icon: 'none' }),
  });
};

/**
 * 科目功能处理
 */
const handleSubject = (subject) =>
    uni.showToast({ title: `即将打开${{ chinese: '语文', math: '数学', english: '英语' }[subject]}功能`, icon: 'none' });

</script>

<style scoped>
/* ... CSS 样式保持不变 ... */
.user-info-bar {
  width: 100%;
  padding: 12px 20px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.welcome-text {
  font-size: 16px;
  color: #333;
}
.status-tag {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: #eee;
  color: #999;
}
.status-tag.status-active {
  background-color: #e6f7ed;
  color: #52c41a;
}
.home-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.top-banner {
  width: 100%;
  padding: 15px 0;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
}
.cartoon-img {
  width: 90%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.core-functions {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.function-item:nth-child(1) { background-color: #409eff; }
.function-item:nth-child(2) { background-color: #67c23a; }
.function-item:nth-child(3) { background-color: #f5a623; }
.function-icon { width: 60px; height: 60px; }
.function-text { font-size: 16px; color: #fff; font-weight: 500; }
.subject-icons {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 10px 0 20px;
}
.subject-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.subject-icon { width: 50px; height: 50px; }
.subject-text { font-size: 14px; color: #666; }
.bottom-tab {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 99;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 25%;
}
.tab-icon { width: 24px; height: 24px; }
.tab-text { font-size: 12px; color: #999; }
.tab-item.active .tab-text { color: #409eff; }
</style>